<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>{{ data.title }}</span>
      </div>
      <div style="width: 100%; height: 500px" :id="data.idName"></div>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";
import Echarts from "echarts";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected data!: any;

  @Watch("data", { deep: true })
  protected init() {
    this.draw();
  }
  private draw() {
    const element: any = document.getElementById(this.data.idName);
    const myChart = Echarts.init(element);
    myChart.setOption({
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      legend: {
        orient: "vertical",
        right: 10,
        data: this.data.did,
      },
      series: [
        {
          name: this.data.title,
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,

              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: this.data.totalList,
        },
      ],
    });
    myChart.dispatchAction({
      type: "mousemove",
    });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
</style>


